<template>
  <a-modal v-model="visible" :width='1300'  title="工单详情" @cancel='cancel' footer=''>

    <a-dropdown v-if="selectedRowKeys.length> 0">
      <a-button style="margin-left: 8px;margin-bottom: 8px" type='primary' @click='updateCategory'> 移动 </a-button>
    </a-dropdown>
    <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
      <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
      <a style="margin-left: 24px" @click="onClearSelected">清空</a>
    </div>
        <a-table
          ref='table'
          size='middle'
          :scroll={y:400}
          bordered
          childrenColumnName='childrenColumnName'
          :columns='columns'
          :dataSource='dataSource'
          :loading='loading'
          :pagination='ipagination'
          :row-selection="rowSelection"
          :rowKey="record => record.complaintId"
          @change='handleTableChange'
        >

        <span slot='purpose' slot-scope='text, record,index'>
        <span v-if="text.purpose==='98'">咨询类</span>
        <span v-else-if="text.purpose==='01'">建议类</span>
        <span v-else>投诉类</span>
      </span>
        <span slot='dealType' slot-scope='text, record,index'>
        <span v-if="text.dealType==='2'">已答复</span>
        <span v-else>办理中</span>
      </span>
        </a-table>

    <a-modal v-model="visibleItem" :width='500' style='text-align: center' title="关键字" @ok='sureUpdate'>
      <a-cascader
        ref="cascader"
        :options="options"
        :show-search="{ filter }"
        style='width: 300px'
        placeholder="请选择关键字分类"
        :field-names="{ label: 'name', value: 'id', children: 'children' }"
        @change="onChange"
      />


    </a-modal>


  </a-modal>
</template>

<script>
import ReportsEpidemicDailyService from '@/myService/ReportsEpidemicDailyService'

export default {
  name: 'StatisticsAddOrderDetailModel',
  data(){
    return{
      visible:false,
      dataSource: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      queryData:{
        ds:'',
        categoryId:'',
        pageIndex:1,
        pageSize: 10
      },
      // 表头
      columns: [
        // {
        //   title: '#',
        //   dataIndex: '',
        //   key: 'rowIndex',
        //   width: 60,
        //   align: 'center',
        //   customRender: (text, row, index) =>
        //     <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        // },
        {
          title: '信访事项编号',
          dataIndex: 'xfjbh',
          align: 'center',
          ellipsis: true
        },
        {
          title: '信访目的',
          align: 'center',
          dataIndex: 'purpose',
          scopedSlots: { customRender: 'purpose' },
          ellipsis: true
        },
        {
          title: '问题属地',
          align: 'center',
          dataIndex: 'problemTerritory',
          ellipsis: true
        },
        {
          title: '内容分类',
          align: 'center',
          dataIndex: 'contentType',
          ellipsis: true
        },
        {
          title: '当前状态',
          align: 'center',
          dataIndex: 'dealType',
          scopedSlots: { customRender: 'dealType' },
          ellipsis: true
        },
        {
          title: '内容',
          align: 'center',
          width: 300,
          dataIndex: 'content',
          ellipsis: true
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'contactName',
          ellipsis: true
        },
        {
          title: '联系电话',
          align: 'center',
          dataIndex: 'contactPhone',
          ellipsis: true
        },
        {
          title: '关键字',
          align: 'center',
          dataIndex: 'keyName',
          ellipsis: true
        }

      ],
      /* table加载状态 */
      loading: false,
      selectedRowKeys:[],
      selectedRows:[],
      visibleItem:false,
      options:[],
      keyId:'',
      newCategoryId:''
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows;
          console.log(this.selectedRowKeys)
        },
        selectedRowKeys: this.selectedRowKeys,
      };
    },
  },
  methods:{
    open(ds, categoryId){
      if(this.queryData.ds!==ds || this.queryData.categoryId!==categoryId){
        this.queryData.ds=ds;
        this.queryData.categoryId=categoryId;
        this.ipagination.pageSize=10;
        this.ipagination.current=1;
        this.loadData();
      }
      this.visible=true;
    },
    cancel(){
      this.$emit('updateCategory')
    },
    loadData(){
      this.loading = true
      this.dataSource=[]
      this.queryData.pageSize = this.ipagination.pageSize
      this.queryData.pageIndex = this.ipagination.current
      this.ipagination.total=0
      ReportsEpidemicDailyService.getReportsEpidemicOrder(this.queryData).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      console.log(pagination)
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.loadData()
    },
    onClearSelected(){
      this.selectedRowKeys=[];
      this.selectedRows=[];
    },
    updateCategory(){
      this.visibleItem=true
      this.keyId=''
      ReportsEpidemicDailyService.getCategoryInfo(0).then(res=>{
        if(res.success){
          this.options=res.result
        }
      })

    },
    filter(inputValue, path) {
      return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
    onChange(value, selectedOptions) {
      this.newCategoryId=selectedOptions[0].id;
      this.keyId=selectedOptions[1].id;
    },
    sureUpdate(){
      if(this.keyId!==''){
        let data={
          newCategoryId:this.newCategoryId,
          oldCategoryId:this.queryData.categoryId,
          keyId:this.keyId,
          ds:this.queryData.ds,
          complaintIdList:this.selectedRowKeys
        }
        console.log(data)
        ReportsEpidemicDailyService.changOrderKeyWord(data).then(res=>{
          console.log(res)
          if(res.result===true){
            this.$refs.cascader.sValue = []
            this.onClearSelected();
            this.loadData();
            this.$message.success("更新成功")
            this.visibleItem=false;
          }
        })
      }else {
        this.$message.error("关键字不可为空")
      }
    }
  }

}
</script>

<style scoped>

</style>